<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.menu{
			list-style: none;
			display: inline-flex;
		}
		.menu li{
			width: 100px;
			height: 32px;
			background-color: rgb(59, 153, 252);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			color: white;
		}
		.menu-div{
			display: none;
			background-color: aqua;
		}
		.menu li:hover{
			background-color: rgb(59 153 252 / 74%);
		}
	</style>
	<body>
		<ul class="menu">
			<li>
				<a>菜单</a>
				<div class="menu-div">内容</div>
			</li>
			<li>
				<a>菜单</a>
				<div class="menu-div">内容</div>
			</li>
			<li>
				<a>菜单</a>
				<div class="menu-div">内容</div>
			</li>
			<li>
				<a>菜单</a>
				<div class="menu-div">内容</div>
			</li>
		</ul>
		
		<script>
			const liItems = document.querySelectorAll('.menu li');
			liItems.forEach((li) => {
				 //鼠标悬停
				 li.addEventListener('mouseover', function(e) {
					 let nodes=Array.from(li.childNodes);
					 nodes.forEach((node)=>{
						 if(node.nodeName=='DIV'){
							 console.log(node);
							 node.style.position ='absolute';
							 node.style.display = 'block';
							 node.style.width = li.offsetWidth +"px";
							 node.style.left = li.offsetLeft + "px";
							 node.style.top = li.offsetTop + li.offsetHeight+ 10 + "px";
						 }
					 })
				 });
				 //鼠标离开事件
				li.addEventListener('mouseout', function(e) {
					   let nodes=Array.from(li.childNodes);
					   nodes.forEach((node)=>{
							 if(node.nodeName=='DIV'){
								 node.style.display = 'none';
							 }
					   })
				});
			})
			
			
		</script>
	</body>
</html>